<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>cssTen</title>
</head>
<style>
  *{
    margin: 0;
    padding: 0;
  }
  .one1{
    display: inline-block;
    position: relative;
    background-color: deepskyblue;
    width: 100%;
    height: 60px;
    left: 50%;
    transform: translate(-50%);
    border: black 1px solid;
  }
.one{
  float: left;
  left: 40%;
  top: 50%;
  transform: translate(-30%,-50%);
  position: absolute;
  z-index: 1;
  /*vertical-align: bottom;*/ /*垂直居中对齐*/
  height: 30px;
  box-sizing: border-box; /*清除盒子的边框大小*/

  text-decoration: none;
  border: black 1px solid;


}
.two {
  float: left;
  left: 50%;
  top: 50%;
  transform: translate(-30%, -50%);
  position: absolute;
  /*vertical-align: middle;*/ /*垂直居中对齐*/
  height: 30px;

  z-index: 1;

  text-decoration: none;
  border: black 1px solid;
}
.o2{
  background-color: deepskyblue;
  width: 200px;
  height: 200px;
}
.o1{
  vertical-align: top;
}


</style>
<body>
<div class="one1">
  <input type="text" placeholder="请输入用户名" class="one">
  <input type="submit" value="搜索" class="two">
</div>
<div>vertical-align: baseline; /*默认，垂直基线对齐*/</div>
<div>vertical-align: middle; /*垂直居中对齐*/</div>
<div>vertical-align: top; /*垂直顶部对齐*/</div>
<div>vertical-align: bottom; /*垂直底部对齐*/</div>
<div class="o2">
  <input type="text" class="o1">
</div>
</body>
</html>
